<template>

    <div>
        <Select :transfer="true" @on-change="selectCity" v-model="pId" placeholder="请选择省份"
                style="width: 100px">
            <Option :value="list.provinces_id+''" v-for="list in provincesData" :key="list.provinces_id">
              {{list.provinces_name}}
            </Option>
        </Select>
        <Select  :transfer="true" @on-change="selectDistricts" v-model="cId"
               placeholder="请选择城市" style="width: 100px">
            <Option :value="list.city_id+''" v-for="list in cityData" :key="list.city_id">
                {{list.city_name}}
            </Option>
        </Select>
        <Select  :transfer="true"   @on-change="upData" v-model="dId" placeholder="请选择区/县"
                style="width: 100px">
            <Option :value="list.districts_id+''" v-for="list in districtsData" :key="list.districts_id">
                {{list.districts_name}}
            </Option>
        </Select>
    </div>
</template>
<script>
    import API from '../config/api'
    import qs from 'qs'

    export default {
        props: ['provincesId','cityId','districtsId'],
        data() {
            return {
                cityData:{},
                provincesData:{},
                districtsData:{},
                pId:this.provincesId+"",
                cId: this.cityId+"",
                dId:this.districtsId+"",
            }
        },
/*       created(){
            this.getProvinces();
            if(this.provincesId){
                this.selectCity(this.provincesId);
                this.selectDistricts(this.cityId);
            }
//            this.pId=this.provincesId+""
//            this.cId=this.cityId+""
//            this.dId=this.districtsId+""
        },*/
        methods:{
            selectCity(pid) {
                this.axios.post(API.GET_CITY, qs.stringify({pid: pid})).then(response => {
                    this.cityData = response.data.data;
                })
                this.upData();
            },
            selectDistricts(pid) {
                this.axios.post(API.GET_DISTRICTS, qs.stringify({pid: pid})).then(response => {
                    this.districtsData = response.data.data;
                })
                this.upData();
            },
            getProvinces() {
                this.axios.post(API.GET_PROVINCES).then(response => {
                    this.provincesData = response.data.data;
                })
            },
            upData(id){
                let dId = id || this.dId;
                this.$emit('on-change',{
                    pId:this.pId,
                    cId:this.cId,
                    dId:dId
                })

            }
        },
/*        watch: {
            cityId(val) {

                this.cId = val;
            },
            cId(val){
                console.log("cId"+val)
            }
        },*/
       mounted(){
            this.getProvinces();
            if(this.provincesId){
                this.selectCity(this.provincesId);
                this.selectDistricts(this.cityId);
            }
        }
    }
</script>
<style lang='scss'>

</style>
